<template>
  <div class="num-main">
    <div class="num-card">
      <div>24小时重点关注</div>
      <div class="num" :class="checkNum(alarmNum.hour24) ? 'red' : ''" @click="openAlarm24h()">
        {{ alarmNum.hour24 }}
      </div>
    </div>
    <div class="num-card">
      <div>当日发起工单</div>
      <div class="num">
        {{ alarmNum.curTicket }}
      </div>
    </div>
    <div class="num-card">
      <div>当日未完成工单</div>
      <div class="num" :class="checkNum(alarmNum.curUnfinishTicket) ? 'red' : ''" @click="openCurTicket()">
        {{ alarmNum.curUnfinishTicket }}
      </div>
    </div>
    <div class="num-card">
      <div>当日告警总数</div>
      <div class="num">
        {{ alarmNum.curAlarmTotal }}
      </div>
    </div>
    <div class="num-card">
      <div>历史未处置重点关注</div>
      <div class="num" :class="checkNum(alarmNum.hisImport) ? 'red' : ''" @click="openAlarmImport()">
        {{ alarmNum.hisImport }}
      </div>
    </div>
    <div class="num-card">
      <div>历史未处置一般关注</div>
      <div class="num" style="cursor: pointer" @click="openAlarmCommon()">
        {{ alarmNum.hisCommon }}
      </div>
    </div>
    <div class="num-card">
      <div>历史未完成工单</div>
      <div class="num" :class="checkNum(alarmNum.hisUnfinishTicket) ? 'red' : ''" @click="openHisTicket()">
        {{ alarmNum.hisUnfinishTicket }}
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from "vue";
import { getPendingTicketListApi } from "@/api/modules/ticket/pending";
import { getAlarmOverviewApi } from "@/api/modules/netManagement/ucenter";

import { useRouter } from "vue-router";
const router = useRouter();
const alarmNum = ref({
  hour24: 0,
  curTicket: 0,
  curUnfinishTicket: 0,
  curAlarmTotal: 0,
  hisImport: 0,
  hisCommon: 0,
  hisUnfinishTicket: 0
});
const checkNum = num => {
  return !!(num && num > 0);
};

const getAlarmTotalNum = async () => {
  alarmNum.value = {
    hour24: 0,
    curTicket: 0,
    curUnfinishTicket: 0,
    curAlarmTotal: 0,
    hisImport: 0,
    hisCommon: 0,
    hisUnfinishTicket: 0
  };
  await getAlarmOverviewApi()
    .then(res => {
      const data: any = res.data || {};
      console.log(data);
      if (data) {
        alarmNum.value = {
          hour24: data.last_24_hour_important_alarms || 0,
          curTicket: data.today_alarms_with_ticket || 0,
          curUnfinishTicket: data.today_alarms_with_unfinished_ticket || 0,
          curAlarmTotal: data.today_alarms || 0,
          hisImport: data.history_important_alarms || 0,
          hisCommon: data.history_common_alarms || 0,
          hisUnfinishTicket: data.history_unfinished_alarms || 0
        };
      }
    })
    .catch(error => {
      console.log(error);
    });
};
getAlarmTotalNum();

const openAlarm24h = () => {
  if (checkNum(alarmNum.value.hour24)) {
    router.push({ name: "warning_24hours", query: { importance: "important" } });
  }
};

const openCurTicket = async () => {
  if (checkNum(alarmNum.value.curUnfinishTicket)) {
    goToTicket();
  }
};

// 本人存在待办则跳转待办工单，本人无待办则跳转已办工单
const goToTicket = async () => {
  const params = {
    page: 1,
    page_size: 10
  };
  // 是否存在待办工单
  const res = await getPendingTicketListApi(params);
  if (!(res && res.data && res.data.count)) {
    router.push({ name: "ticket_finished", query: { source_type: "alarm" } });
  } else {
    router.push({ name: "ticket_pending", query: { source_type: "alarm" } });
  }
};

const openAlarmImport = () => {
  if (checkNum(alarmNum.value.hisImport)) {
    router.push({
      name: "warning_24hours",
      query: {
        is_handled: "false",
        importance: "important"
      }
    });
  }
};

const openAlarmCommon = () => {
  router.push({
    name: "warning_24hours",
    query: {
      is_handled: "false",
      importance: "common"
    }
  });
};

const openHisTicket = () => {
  if (checkNum(alarmNum.value.hisUnfinishTicket)) {
    goToTicket();
  }
};
</script>

<style scoped lang="scss">
@import "../common.scss";
.num-main {
  display: flex;
  flex-wrap: wrap;
  gap: 16px 16px;
  .num-card {
    .red {
      color: red;
      cursor: pointer;
    }
  }
}
</style>
